import React,{useState,useEffect} from 'react'
import { IndexBar, List } from 'antd-mobile'
import MyHeader from '../../components/header/MyHeader'
import api from '../../api/index'
import style from './style.module.scss'
//导入仓库redux 
import {useDispatch,useSelector} from 'react-redux'
import {change} from '../../store/reducers/citys'
import {useNavigate} from 'react-router-dom'

export default function City() {
  //定义变量存储城市信息
  const [current,setCurrent] = useState('')
  const [hotCity,setHotCity] = useState([])
  const [cityList,setCityList] = useState([])
  const [distance,setDistance] =useState(0)
  const divRef = React.createRef();
  const hotRef = React.createRef();
  //跳转界面
  const navigate = useNavigate();
  //react-redux 
  const dispatch=useDispatch()
  const cityname = useSelector(state=>state.city.cityname)
 
  function changeCity(val){
    console.log(val);
    //存储城市名称 -redux 
    dispatch(change(val))
    //本地
    localStorage.setItem('cityname',val)
    //返回首页
    navigate('/')

  }
  //获取城市列表----
  async function getCityList(){
    let res = await api.getCitys();
    const indexCitys = res.data.list.indexCitys;
    console.log('热门城市----',indexCitys);
    //获取热门城市
    setHotCity(indexCitys.hot)
    //获取当前城市
    setCurrent(indexCitys.pos[0].name)
    //获取城市列表 groups=[{title:'',items:[]},{}]
    let groups=[];
    for(let key in indexCitys){
      if(key =='hot' || key=='pos'){
        continue;
      }
        let obj={};
        obj.title=key;
        obj.items=indexCitys[key]
        groups.push(obj)
    }
    console.log('==================',groups);
    //存储数据
    setCityList(groups)
  }
 
  useEffect(()=>{
    getCityList();
    console.log(divRef.current.offsetTop,hotRef.current.clientHeight,window.innerHeight);
    //距离顶部的距离
    let height= window.innerHeight - hotRef.current.clientHeight;
    setDistance(height)
  },[])
  return (
    <div style={{height: window.innerHeight,position:'relative',overflow:'hidden'}}>
      {/* 城市列表 */}
       {/* <MyHeader title='城市选择'/> */}
      <div ref={hotRef}> 
        <MyHeader>城市选择</MyHeader>
        <div className={style.content}>
            {/* 当前城市 */}
            <div className={style.title}>当前城市</div>
            <div className={style.cityname}>{cityname}</div>

            {/* 热门城市 */}

            <div className={style.title}>热门城市</div>
            <div className={style.citysContent}>
              {
                hotCity.map(ele=>{
                  // 点击当前热门城市按钮  获取当前的数据 传递参数 changeCity.bind(null,ele.name)
                return <div key={ele.id} className={style.cityname} onClick={changeCity.bind(null,ele.name)}>{ele.name}</div>
                })
              }
    
            </div>
        </div>
      </div>
      <div className={style.antBox} ref={divRef} style={{ height: distance,zIndex:99 }}>
      <IndexBar>
        {cityList.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`${title}`}
              key={`标题${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item key={index}  onClick={changeCity.bind(null,item.name)} arrow={false}>
                    {item.name}
                  </List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
      </div>

    </div>
  )
}
